<template>
  <div class="container">
    <div class="caption">录制与编辑</div>
    <div class="addVideoItem">
      <div class="left">
        <div class="title">
          <div class="right-title">窗口分割数量</div>
          <div class="select">
            <el-select
              v-model="windowValue"
              @visible-change="visibleChange"
              @change="changeWndNumClick(windowValue)"
              placeholder="1*1"
              size="large"
            >
              <el-option v-for="item in windowOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
      </div>
      <el-button type="primary" class="btn" @click="addVideoItem">添加编辑视频</el-button>
    </div>
    <div class="videoScreen">
      <iframe id="divPluginRecordAndEdit" class="plugin"> </iframe>
    </div>
    <div class="footer">
      <div class="btn">
        <el-button
          v-for="(item, index) in footerCtrlBtnList"
          :key="index"
          class="item"
          type="primary"
          @click="footerBtnCtrl(item.value)"
          >{{ item.name }}</el-button
        >
      </div>
      <div class="check">
        <el-switch v-model="bZhuanMa" class="mb-2 item" active-text="启用转码码流" />
      </div>
    </div>
    <el-dialog
      class="dialog"
      v-model="dialogVisible"
      :before-close="handleClose"
      title="添加编辑视频"
      :close-on-click-modal="false"
      ref="dialogContentRef"
      append-to-body
    >
      <el-form
        class="form"
        ref="formRef"
        :model="searchParams"
        :rules="searchParams.rules"
        hide-required-asterisk
        label-position="top"
      >
        <el-form-item class="item" prop="type">
          <div class="label">通道列表</div>
          <el-select v-model="searchParams.channel.value" class="ctl" placeholder="请选择" size="large">
            <el-option
              v-for="item in searchParams.channel.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="item" prop="type">
          <div class="label">码流类型</div>
          <el-select v-model="searchParams.type.value" class="ctl" placeholder="请选择" size="large">
            <el-option
              v-for="item in searchParams.type.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="item" prop="startTime">
          <div class="label">开始时间</div>
          <el-date-picker class="ctl" v-model="searchParams.startTime" type="datetime" placeholder="选择开始时间" />
        </el-form-item>
        <el-form-item class="item" prop="endTime">
          <div class="label">结束时间</div>
          <el-date-picker class="ctl" v-model="searchParams.endTime" type="datetime" placeholder="选择结束时间" />
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button type="primary" @click="searchItemClick">查找</el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="dialog2"
      v-model="dialogInfo"
      :before-close="handleClose2"
      title="保存编辑视频"
      append-to-body
      width="80%"
      :close-on-click-modal="false"
      ref="dialogContentRef2"
    >
      <div class="table">
        <el-progress v-if="percentage > 0 && percentage < 100" :percentage="percentage" />
        <BaseTable v-bind="tableProps" :tableData="formData" v-loading="loading" ref="BaseTableRef2"> </BaseTable>
      </div>
      <div class="selectFile">
        <div class="item">文件保存路径</div>
        <div class="item"><el-input v-model="zfileName" placeholder="文件路径"></el-input></div>
        <el-button class="item" type="primary" @click="OpenFileDlg">文件保存路径</el-button>
      </div>
      <div class="footer">
        <el-button type="primary" class="item" @click="submit(false)">取消</el-button>
        <el-button type="primary" class="item" @click="submit(true)">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onActivated, onDeactivated, reactive, ref, unref } from 'vue';
import {
  destroy,
  clickStopPlayback,
  init,
  changeWndNum,
  hideWindow,
  showWindow,
  getCurWindowIndex,
  login,
  clickPause,
  clickStartPlayback,
  clickReversePlayback,
  clickFrame,
  clickResume,
  clickPlaySlow,
  clickPlayFast,
  clickStartRecord,
  clickStopRecord,
  clickOpenFileDlg,
  dateFormat,
  clickGetOSDTime,
  clickGetLocalCfg,
  clickSetLocalCfg,
  getWindowStatus,
  getAllWindowIndex,
  stopRealPlayByIndex,
} from '@/utils/webVideoCtrl';
import { userSystemStore } from '@/store';
import { ElMessage } from 'element-plus';
import { addVideo, getFileSize } from '@/utils/ipc';
import dayjs from 'dayjs';
import BaseTable from '@/components/BaseTable/index.vue';
import router from '@/router';

const systemStore = userSystemStore();
const percentage = ref(0);
const bZhuanMa = ref(false);
const dialogVisible = ref(false);
const dialogInfo = ref(false);
const zfileName = ref('');
const dialogContentRef = ref(null);
const BaseTableRef2 = ref(null);
const dialogContentRef2 = ref(null);
const loading = ref(false);

//定义窗口回放参数,当查找视频后，在某个窗体播放了，那么临时保存查询参数，方便对回放进行操作
const searchParamsTmp = reactive([]);

//窗口分割
const windowValue = ref(2);
const windowOptions = [
  {
    value: 1,
    label: '1*1',
  },
  {
    value: 2,
    label: '2*2',
  },
  {
    value: 3,
    label: '3*3',
  },
  {
    value: 4,
    label: '4*4',
  },
];

const footerCtrlBtnList = reactive([
  {
    value: 1,
    name: '开始回放',
  },
  {
    value: 2,
    name: '停止回放',
  },
  {
    value: 3,
    name: '倒放',
  },
  {
    value: 4,
    name: '单帧',
  },
  {
    value: 5,
    name: '暂停',
  },
  {
    value: 6,
    name: '恢复',
  },
  {
    value: 7,
    name: '慢放',
  },
  {
    value: 8,
    name: '快放',
  },
  {
    value: 9,
    name: '开始剪辑',
  },
  {
    value: 10,
    name: '停止剪辑',
  },
  {
    value: 11,
    name: '保存视频',
  },
]);

// const formData = reactive([
//   {
//     id: '0',
//     videoName: '',
//     videoDuration: '',
//     fileSize: '1024',
//     startTime: '',
//     endTime: '',
//     channel: '0',
//     status: '0',
//     downloadStatus: '0',
//     savePath: '',
//     createTime: '',
//     createUser: '',
//     szPlaybackURI: '',
//     isRecord: false,
//     longTime: '',
//     oldFileName: '',
//   },
// ]);
const formData = reactive([]);

const tableProps = reactive({
  tableColumns: [
    {
      type: 'index',
      width: 80,
      label: '序号',
    },
    {
      prop: 'videoName',
      label: '视频名称',
      type: 'input',
      width: 250,
    },
    {
      prop: 'longTime',
      label: '视频时长(S)',
    },
    {
      prop: 'fileSize',
      label: '视频大小(MB)',
    },
    {
      prop: 'createTime',
      label: '生成时间',
      width: 250,
    },
    {
      label: '操作',
      width: 150,
      fixed: 'right',
      operaterList: [
        {
          name: '删除',
          operater: (item) => {
            deleteItem(item.row);
          },
        },
      ],
    },
  ],
});



const searchParams = reactive({
  type: {
    value: 1,
    options: [
      {
        value: 1,
        label: '主码流',
      },
      {
        value: 2,
        label: '子码流',
      },
    ],
  },
  channel: {
    value: '',
    options: [],
  },
  startTime: '',
  endTime: '',
  rules:{},
});



const addVideoItem = async () => {
  await hideWindow();
  dialogVisible.value = true;
  let searchItem = searchParamsTmp[getCurWindowIndex()];
  if (searchItem) {
    searchParams.startTime = searchItem.startTime ? searchItem.startTime : '';
    searchParams.endTime = searchItem.endTime ? searchItem.endTime : '';
    searchParams.channel.value = searchItem.channel ? searchItem.channel : '';
    searchParams.type.value = searchItem.iStreamType ? searchItem.iStreamType : 1;
  } else {
    searchParams.startTime = '';
    searchParams.endTime = '';
    searchParams.channel.value = searchParams.channel.options.length > 0 ? searchParams.channel.options[0].value : '';
    searchParams.type.value = 1;
  }
};

const visibleChange = async (visible) => {
  if (visible) {
    await hideWindow();
  } else {
    await showWindow();
  }
};

const changeWndNumClick = (item) => {
  changeWndNum(item);
  showWindow();
};

const OpenFileDlg = async () => {
  let newFilePath = await clickOpenFileDlg(0);
  if (newFilePath !== '') {
    zfileName.value = newFilePath;
    let localConfig = await clickGetLocalCfg();
    localConfig.downloadPath = newFilePath;
    localConfig.recordPath = newFilePath;
    await clickSetLocalCfg(localConfig);
  }
};

onActivated(async () => {
  searchParams.channel.options = systemStore.getChannels();
  if (searchParams.channel.options.length === 0) {
    ElMessage.error('通道数据获取失败，请点击实时监控管理模块，登录监控设备！');
    await hideWindow();
    await destroy();
    void router.push({ path: '/realTimeMonitor' });
  } else {
    formData.value = [];
    let localConfig = await clickGetLocalCfg();
    zfileName.value = localConfig.downloadPath;
    await initPlugin();
  }
});

onDeactivated(async () => {
  const allIndexs = getAllWindowIndex();
  // 第一次索引0不会存在
  stopRealPlayByIndex(0);
  allIndexs.forEach((index) => {
    stopRealPlayByIndex(index);
  });
  await hideWindow();
  await destroy();
});

const initPlugin = async () => {
  if (!systemStore.$state.loginFlag) {
    return;
  }
  await init('divPluginRecordAndEdit');
  let videoData = systemStore.$state.videoData;
  if (!videoData.videoLogin) {
    let videoLogin = await login(videoData);
    videoData.videoLogin = videoLogin;
    systemStore.setVideoData(videoData);
  }
};

//事件控制
const footerBtnCtrl = (value) => {
  switch (value) {
    case 11:
      saveVideo();
      break;
    case 1:
      startPlayback();
      break;
    case 2:
      clickStopPlayback(systemStore.getVideoData());
      break;
    case 3:
      reversePlayback();
      break;
    case 4:
      clickFrame(systemStore.getVideoData());
      break;
    case 5:
      clickPause(systemStore.getVideoData());
      break;
    case 6:
      clickResume(systemStore.getVideoData());
      break;
    case 7:
      clickPlaySlow(systemStore.getVideoData());
      break;
    case 8:
      clickPlayFast(systemStore.getVideoData());
      break;
    case 9:
      StartRecord();
      break;
    case 10:
      stopRecord();
      break;
    default:
      break;
  }
};

//开始回放
const startPlayback = async () => {
  let item = searchParamsTmp[getCurWindowIndex()];
  if (!item) {
    ElMessage.error('开始回放,未设置查找时间范围');
    return;
  }
  await clickStartPlayback(
    systemStore.getVideoData(),
    item.startTime,
    item.endTime,
    item.channel,
    item.iStreamType,
    bZhuanMa.value,
  );
};

//倒放
const reversePlayback = async () => {
  let item = searchParamsTmp[getCurWindowIndex()];
  if (!item) {
    ElMessage.error('倒放失败,未设置查找时间范围');
    return;
  }
  await clickReversePlayback(systemStore.getVideoData(), item.startTime, item.endTime, item.channel, item.iStreamType);
};

//开始剪辑
const StartRecord = async () => {
  let itemList = searchParamsTmp[getCurWindowIndex()];
  // 当前窗口状态是否在回放
  const wStatus = getWindowStatus(getCurWindowIndex());
  // console.log('wStatus', wStatus);
  if (wStatus === null) {
    ElMessage.error('请选择正在回放窗口');
    return;
  }
  if (wStatus.length === 0) {
    ElMessage.error('请选择窗口');
    return;
  } else if (wStatus.iPlayStatus === 0) {
    ElMessage.error('请点击开始回放');
    return;
  }

  if (!itemList) {
    ElMessage.error('开始剪辑失败,未设置查找时间范围');
    return;
  }
  let item = itemList;
  //T_当前日期_保存文件序号  如：T_20241102_1.avi.
  let localConfig = await clickGetLocalCfg();
  let dateDir = dateFormat(new Date(), 'yyyy-MM-dd');
  //录制文件路径
  dateDir = localConfig.playbackFilePath + '\\' + dateDir + '\\';
  let szFileName = 'T_' + dayjs(new Date()).format('YYYYMMDD') + '_';
  let maxFileIndex = 1;
  //判断文件是否存在
  while (true) {
    if (window.api.fileExists(dateDir + szFileName + maxFileIndex + '.mp4')) {
      maxFileIndex = maxFileIndex + 1;
    } else {
      break;
    }
  }
  let fileName = await clickStartRecord(systemStore.getVideoData(), 'playback', szFileName + maxFileIndex);
  console.log('fileName-------------', fileName);
  if (item) {
    let osdTime = clickGetOSDTime();
    osdTime.then((time) => {
      osdTime = time;
      item.startTime = osdTime;
    });
    item.fileName = fileName + '.mp4';
    item.isRecord = true;
  }
  searchParamsTmp[getCurWindowIndex()] = item;
};

const stopRecord = async () => {
  await clickStopRecord(systemStore.getVideoData(), 'playback', getCurWindowIndex());
  let itemList = searchParamsTmp[getCurWindowIndex()];
  let item = itemList;
  if (item) {
    //计算文件大小
    let localConfig = await clickGetLocalCfg();
    let dateDir = dateFormat(new Date(), 'yyyy-MM-dd');
    //录制文件路径
    dateDir = localConfig.playbackFilePath + '\\' + dateDir + '\\';
    item.savePath = dateDir;
    let holdFileName = dateDir + item.fileName;
    //根据文件名获取文件大小
    let size = await window.api.getFileSize(holdFileName);
    item.size = size;
    let videoInfo = await getVideoInfo(holdFileName);
    item.videoDuration = videoInfo.duration;
    //结束时间 = 开始时间 + 播放时长
    item.endTime = dayjs(item.startTime).add(videoInfo.duration, 'second').format('YYYY-MM-DD HH:mm:ss');
    console.log('item.endTim', item.endTim);
    searchParamsTmp[getCurWindowIndex()] = item;
    console.log('searchParamsTmp1', searchParamsTmp);
  }
};

const FormatDuration = (logintTimeSS) => {
  let h = parseInt((logintTimeSS / 60 / 60).toString());
  let m = parseInt(((logintTimeSS - h * 60 * 60) / 60).toString());
  let s = parseInt((logintTimeSS - h * 60 * 60 - m * 60).toString());
  return `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`;
};

const getDateTimeDiff = (dateTime1, dateTime2) => {
  const date1 = new Date(dateTime1);
  const date2 = new Date(dateTime2);

  const diff = date1.getTime() - date2.getTime();
  return parseInt((diff / 1000).toString());
};

//保存视频
const saveVideo = async () => {
  try {
    formData.length = 0;
    // console.log('searchParamsTmp', searchParamsTmp);
    let item = searchParamsTmp[getCurWindowIndex()];
    if (!item.fileName) {
      ElMessage.error('请先剪辑视频！');
      return;
    }
    formData.push({
      id: '0',
      videoName: item.fileName,
      videoDuration: item.videoDuration,
      fileSize: item.size ? ((item.size * 1.0) / 1024.0 / 1024.0).toFixed(2) : '0',
      startTime: item.startTime ? item.startTime : '',
      endTime: item.endTime ? item.endTime : '',
      channel: item.channel ? item.channel : '',
      status: '0',
      downloadStatus: '0',
      savePath: item.savePath ? item.savePath : '',
      createUser: systemStore.getUserInfo().name,
      isRecord: item.isRecord ? item.isRecord : false,
      longTime: item.videoDuration,
      createTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      szPlaybackURI: item.szPlaybackURI ? item.szPlaybackURI : '',
      oldFileName: item.fileName ? item.fileName : '',
    });
    console.log('formData---------------', formData);
    dialogInfo.value = true;
    //获取保存路径
    let localConfig = await clickGetLocalCfg();
    zfileName.value = localConfig.downloadPath;
    await hideWindow();
  } catch (error) {
    ElMessage.error('请先选择回放监控，剪辑视频！');
    console.log('error------------', error);
    await showWindow();
  }
};

const handleClose = async () => {
  dialogVisible.value = false;
  percentage.value = -1;
  await showWindow();
};

const handleClose2 = async () => {
  dialogInfo.value = false;
  formData.length = 0;
  percentage.value = -1;
  searchParamsTmp.length = 0;
  await showWindow();
};

//
const deleteItem = (row) => {
  let index = formData.indexOf(row);
  if (index !== -1) {
    formData.splice(index, 1);
  }
};

//保存视频
const submit = async (item: Boolean) => {
  try {
    if (item) {
      //下载文件到本地磁盘
      loading.value = true;
      percentage.value = 0;
      for (let index = 0; index < formData.length; index++) {
        const element = formData[index];
        if (!element.isRecord) {
          // console.log(element);
          await clickStartDownloadRecordByTime(
            systemStore.getVideoData(),
            element.videoName.replace('.mp4', ''),
            element.szPlaybackURI,
            element.startTime,
            element.endTime,
          );

          while (percentage.value < 100) {
            percentage.value = await downProcess();
            // console.log('下载中');
            if (percentage.value == -1) {
              break;
            }
          }
          if (percentage.value == -1) {
            break;
          }
          // //转码
          let outputfileName = await ffmpegExec(
            element.savePath + '\\' + dateFormat(new Date(), 'yyyy-MM-dd') + '\\' + element.videoName,
            zfileName.value + '\\' + element.videoName,
          );

          let videoInfo = await getVideoInfo(outputfileName);
          element.videoDuration = videoInfo.duration;
          element.endTime = dayjs(element.startTime).add(videoInfo.duration, 'second').format('YYYY-MM-DD HH:mm:ss');
        } else {
          //剪辑视频保存本地
          //转码
          let outputfileName = await ffmpegExec(
            element.savePath + '\\' + element.oldFileName,
            zfileName.value + '\\' + element.videoName,
          );

          let videoInfo = await getVideoInfo(outputfileName);
          element.videoDuration = videoInfo.duration;
          element.endTime = dayjs(element.startTime).add(videoInfo.duration, 'second').format('YYYY-MM-DD HH:mm:ss');
          if (percentage.value == -1) {
            break;
          }
        }
        if (percentage.value == -1) {
          break;
        }
        percentage.value = 0;
      }
      addItem(formData);
      loading.value = false;
      ElMessage.success('保存成功');
      formData.length = 0;
      searchParamsTmp.length = 0;
      searchParams.startTime.value = '';
      searchParams.endTime.value = '';
      percentage.value = 0;
      dialogInfo.value = false;
      // void router.push({ path: '/videoRecordAndEdit' });
      showWindow();
      //跳转到数据列表页面
      void router.push({ path: '/videoRecordAndEdit' });
    } else {
      dialogInfo.value = false;
      showWindow();
    }
  } catch (err) {
    ElMessage.error('保存失败');
    // console.log(err);
    loading.value = false;
    percentage.value = 0;
    showWindow();
    dialogInfo.value = false;
  }
};

//转码，需要在转码成功，重新计算文件大小，之后再保存到数据库
const ffmpegExec = async (inputFileName, outputFileName) => {
  let outputfileName = await window.api.execFfmpegPromise(inputFileName, outputFileName, (progress) => {
    // console.log(progress.percent);
    percentage.value = parseInt(progress.percent);
    // console.log('转码中');
  });
  percentage.value = 100;
  percentage.value = 0;
  return outputfileName;
};
interface VideoInfo {
  id?: string;
  videoName?: string;
  videoDuration?: string;
  fileSize?: string;
  startTime?: string;
  endTime?: string;
  channel?: any;
  status?: number;
  downloadStatus?: number;
  savePath?: string;
  createTime?: string;
  createUser?: number;
}
let videoDatList: Array<VideoInfo> = new Array<VideoInfo>();

const getVideoInfo = async (path) => {
  let result = {
    totalFrame: 0,
    fps: 0,
    playMode: 0,
    curFrmeCount: 0,
    duration: 0,
  };
  let videoInfo = await window.api.getVideoOrAudioMetaDataPromise(path);
  if (videoInfo.streams) {
    videoInfo.streams.forEach((item) => {
      if (item.codec_type == 'video') {
        let frameList = item.avg_frame_rate.split('/');
        result.fps = parseInt((frameList[0] / frameList[1]).toFixed(0));
        result.totalFrame = item.nb_frames;
        result.duration = item.duration;
      }
    });
  }
  result.playMode = 0; // 0 正常播放， 1 按帧播放
  result.curFrmeCount = 0;
  return result;
};

//存入数据库
const addItem = async (formData) => {
  try {
    videoDatList.length = 0;
    formData.map((item) => {
      searchParams.channel.options.forEach((itemChannel) => {
        if (itemChannel.value == item.channel) {
          item.channel = itemChannel.value;
        }
      });
      videoDatList.push({
        id: item.id,
        videoName: item.videoName,
        videoDuration: item.videoDuration,
        fileSize: item.fileSize,
        startTime: item.startTime,
        endTime: item.endTime,
        channel: item.channel,
        status: item.status,
        downloadStatus: item.downloadStatus,
        savePath: zfileName.value,
        createTime: item.createTime,
        createUser: item.createUser,
      });
      addVideo(videoDatList);
    });
  } catch (err) {
    console.log(err);
  }
};

//查找视频
const searchItemClick = async () => {
  try {
    if (searchParams.channel === '0') {
      ElMessage.error('请设置通道信息！');
      return;
    } else if (searchParams.type === '0') {
      ElMessage.error('请设置码流信息！');
      return;
    } else if (searchParams.startTime === '') {
      ElMessage.error('请设置回放开始时间！');
      return;
    } else if (searchParams.endTime === '') {
      ElMessage.error('请设置回放结束时间！');
      return;
    } else if (new Date(searchParams.startTime) > new Date(searchParams.endTime)) {
      ElMessage.error('开始时间不能大于结束时间！');
      return;
    }
    console.log('searchParams', searchParams)
    searchParamsTmp[getCurWindowIndex()] = {
      curWindowIndex: getCurWindowIndex(),
      channel: searchParams.channel.value,
      type: searchParams.type.value,
      startTime: dayjs(searchParams.startTime).format('YYYY-MM-DD HH:mm:ss'),
      endTime: dayjs(searchParams.endTime).format('YYYY-MM-DD HH:mm:ss'),
      // startTime: dateFormat(c.startTime, 'yyyy-MM-dd hh:mm:ss'),
      // endTime: dateFormat(searchParams.endTime, 'yyyy-MM-dd hh:mm:ss'),

    };
    console.log(searchParamsTmp[getCurWindowIndex()])
    dialogVisible.value = false;
    showWindow();
    clickStartPlayback(
      systemStore.getVideoData(),
      dayjs(searchParams.startTime).format('YYYY-MM-DD HH:mm:ss'),
      dayjs(searchParams.endTime).format('YYYY-MM-DD HH:mm:ss'),
      // dateFormat(searchParams.startTime, 'yyyy-MM-dd hh:mm:ss'),
      // dateFormat(searchParams.endTime, 'yyyy-MM-dd hh:mm:ss'),
      searchParams.channel.value,
      searchParams.type.value,
      bZhuanMa.value,
    );
  } catch (err) {
    ElMessage.error('回放异常');
    console.log('回放异常' + err);
    showWindow();
    dialogVisible.value = false;
  }
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  .caption {
    background: rgb(242, 242, 242);
    font-weight: 500;
    font-size: 20px;
    color: #020f1b;
    line-height: 24px;
    font-style: normal;
    align-items: center;
    height: 35px;
    padding-left: 8px;
  }

  .addVideoItem {
    border-bottom: dashed 2px rgb(148, 148, 148);
    height: 81px;
    width: 100%;
    display: flex;
    align-items: center;

    .left {
      flex: 1;

      .title {
        font-weight: 500;
        font-size: 16px;
        color: #020f1b;
        font-style: normal;
        display: flex;
        justify-content: center;
        align-items: center;

        .ritht-title {
          width: 150px;
        }

        .select {
          margin-left: 10px;
          width: 125px;
        }
      }
    }

    .btn {
      width: 120px;
    }
  }

  .videoScreen {
    flex: 1;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    border-radius: 5px;
    background: #fff;

    .plugin {
      width: 100%;
      height: 100%;
      margin: 8px;
    }
  }

  .footer {
    height: 120px;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-top: dashed 2px rgb(148, 148, 148);
    justify-content: center;
    align-items: center;

    .btn {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      height: 40%;
      justify-content: center;
      align-items: center;

      .item {
        width: 80px;
        margin-left: 5px;
      }
    }

    .check {
      flex: 1;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}

.dialog {
  display: flex;
  flex-direction: column;
  background-color: red;

  .form {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

    .item {
      width: 300px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;

      .label {
        width: 80px;
        font-weight: 500;
        font-size: 16px;
        color: #020f1b;
        line-height: 24px;
        font-style: normal;
      }

      .ctl {
        flex: 1;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;

    .el-button {
      width: 120px;
    }
  }
}

:deep(.el-table thead th) {
  font-weight: 500;
  font-size: 16px;
  color: #020f1b;
  font-style: normal;
}

.dialog2 {
  height: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  color: #020f1b;
  font-style: normal;

  .table {
    height: 245px;
    width: 100%;
  }

  .selectFile {
    height: 50px;
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .item {
      margin-left: 5px;
    }

    .item:nth-child(1) {
      width: 100px;
    }

    .item:nth-child(3) {
      width: 140px;
    }

    .item:nth-child(2) {
      flex: 1;
    }
  }

  .footer {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .item {
      width: 100px;
      margin-left: 5px;
    }
  }
}
</style>
